<template>
<div>
    <div class="shop-content">
    <div class="administration" @click="isman=!isman">{{isman?"完成":"管理"}}</div>
    <div class="shopping" >
        <div class="shop-group-item" v-for="(itemshop) in goodsList" :key="itemshop.companyId" style=" margin-bottom:1 5px;">
            <div class="shop-name">
                <div class="cheak_new"  @click="chkshopall(itemshop)" :class="{cheak_avtive:itemshop.chkstatus_shpos}"></div>
                <i class="icon"></i>
                <h4><a >{{itemshop.companyName}} </a></h4>
            </div>
            <ul> 
                <li v-for="(itemgood) in itemshop.goodsList" :key="itemgood.goodsId" >
                    <div class="shop-info">
                        <div class="cheak_new_shop" @click="Select(itemgood,itemshop)" :class="{cheak_avtive:itemgood.chkstatus}"></div>
                        <div class="shop-info-img"><a> <img :src="itemgood.goodsThum" /></a></div>
                        <div class="shop-info-text">
                            <h4 style="height:54px;width:100%;">{{itemgood.goodsName}}</h4>
                            <div class="quan" v-show="false">60元券</div>
                            <div class="shop-price">
                                <div class="shop-pices"><span class="yuanjia" v-if="1==itemgood.discount">原价 ￥{{itemgood.goodsRealPrice |amountMin100(2)}}</span>￥<b class="price">{{itemgood.goodsScreenPrice |amountMin100(2)}}</b></div>
                                <div class="shop-arithmetic" style=" width:78px;">
                                    <a href="javascript:;" class="minus" @click="plusreduce(-1,itemgood)">-</a>
                                    <span class="num" >{{itemgood.goodsNumber}}</span>
                                    <a href="javascript:;" class="plus" @click="plusreduce(1,itemgood)">+</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="shopPrice">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
        </div>
    </div>

    <div class="payment-bar">
        <div  class="all-checkbox"><div  class="cheak_new"  @click="chkall()" :class="{cheak_avtive:chkall_status}"></div><label >全选</label></div>
        <div class="shop-total">
            <strong>合计：<i class="total" id="AllTotal">{{totoAmount|amountMin100(2)}}</i></strong>
        </div>
        <a  class="settlement" @click="Settlement">结算 ({{totnum}})</a>
        <div class="delbox" v-show="isman">
            <a class="settlement" @click="delchked">删除</a>
        </div>
    </div>
</div>
<!-- <div class="backTo" onclick="javascript:history.back(-1);">返回</div> -->
</div>
</template>
<style scoped>
  @import "../../../assets/personal/css/detailed_list.css";
  .shop-arithmetic{
      width: 200px;
      margin-right: 15px;
     
  }
  .clearfix{
      clear: both;  
  }
  .delbox{position: absolute; top: 0; right: 0; bottom: 0; left: 80px; background:#fff; }
  .cheak_new{
      width: 17px;
      height: 17px;
      margin-left: 10px;
      background: url("../../../assets/personal/images/weixuan.png") no-repeat ;
      background-size: 100% 100%;
  }
  .cheak_new_shop{
      width: 17px;
      height: 17px;
      background: url("../../../assets/personal/images/weixuan.png") no-repeat ;
      background-size: 100% 100%;
      margin:15px 13px 45px 10px;
  }
  .cheak_avtive{
      width: 17px;
      height: 17px;
      background: url("../../../assets/personal/images/choose-icon-active.png") no-repeat ;
      background-size: 100% 100%;
  }
</style>
<script>
export default {
  data () {
      return {
          goodsList:[],
          page: 1,
          pageSize: 1000,
          busy:false,////////////
          loadall: false,
          mycars:[],
          chkall_status:false,
          isman: false,
          orderJson:[],
          fk:''
      }
  },
  mounted(){
   this.detailedList();
  },
  methods:{
      detailedList(){//取清单
            let buynowid = 0 || window.localStorage.buynowid
            this.$http.get(this.APIURL_PREFIX+"/api/wap/shoppingCart",{ params:{page:this.page,rows:this.pageSize}}).then((response) => { 
               let artmp = response.data.data;
               artmp.forEach(element => {
                   let argoodtmp = element.goodsList;
                       element.chkstatus_shpos=false
                   argoodtmp.forEach((elegood) => {         
                       elegood.chkstatus = (buynowid && parseInt(buynowid) == elegood.goodsId);
                   })
               });     
               this.goodsList= artmp;
               console.log(response.data)
               this.fk=response.data.data[0].userId
               console.log(this.fk)
            }).catch(function(err){
                 console.log(err)
            })
      },
      delchked(){
        if(confirm("确定删除吗？")){
            layer.msg("删除成功")
          let tmplist = JSON.parse(JSON.stringify(this.goodsList));
          tmplist.forEach(function(v,i,ar){
              v.goodsList = v.goodsList.filter((vv,ii,aarr) =>{
                  return !vv.chkstatus;
              })
          })
          tmplist = tmplist.filter(function(v,i,ar){
              return v.goodsList.length>0;
          });
          
          
          this.$http.post(this.APIURL_PREFIX+"/api/wap/shoppingCart/all", $.param({"orderJson":JSON.stringify(this.chkedList)})).then((response) => { 
                if(0 == response.data.code){
                    this.goodsList = tmplist;
                }
            }).catch(function(err){
                    console.log(err)
            })
        }  
          
      },
      plusreduce:function(type,itemgood){//加减更新清单状态
          if( (1== type && itemgood.goodsNumber>98) || (-1 ==type && itemgood.goodsNumber<2)  ){
              return
          }      
          let num = itemgood.goodsNumber;
          1==type? num++: num--;      
          this.$http.put(this.APIURL_PREFIX+"/api/wap/shoppingCart",$.param({cartId:itemgood.cartId,goodsNumber: num})).then((response) => { 
                if(0 == response.data.code){
                    itemgood.goodsNumber = num;
                }
            }).catch(function(err){
                    console.log(err)
            })
      },
      Select:function(itemgood,itemshop){//选中
         itemgood.chkstatus = !itemgood.chkstatus
         if(!itemgood.chkstatus){
             itemshop.chkstatus_shpos = false;
             this.chkall_status = false;
         }
        this.orderJson=itemshop
      },
      chkall:function(){//全选
          let vm=this;
           vm.chkall_status=!vm.chkall_status
           this.goodsList.forEach(function(v,i,ar){
                v.chkstatus_shpos=vm.chkall_status
                v.goodsList.forEach(function(vv,ii){
                vv.chkstatus=vm.chkall_status
            })            
         })
         
         
      },
      chkshopall:function(itemshop){
          itemshop.chkstatus_shpos=!itemshop.chkstatus_shpos
          itemshop.goodsList.forEach(function(v,i,ar){
            v.chkstatus=itemshop.chkstatus_shpos
          })
          if(!itemshop.chkstatus){
             this.chkall_status = false;
         }
      },
      Settlement:function(){
          if(0==this.totnum){
             layer.msg("对不起，勾选的商品不能为空")
          }else{
             //this.$router.push({ name:'details_list_jiesuan',query:{"orderJson":JSON.stringify(this.chkedList)}})
             window.localStorage.chkedlist = JSON.stringify(this.chkedList)
             this.$router.push({ name:'details_list_jiesuan'})
          }
         
        //    this.$http.post(this.APIURL_PREFIX+"/api/wap/order",$.param({"orderJson":JSON.stringify(this.chkedList),amountMoney:this.totnum,fk:this.fk,})).then((response) => {       
                
        //     }).catch(function(err){
        //          console.log(err)
        //     })
      }
  }
  ,watch:{
    
  },
  computed:{
      chkedList: function(){
          let tmplist = JSON.parse(JSON.stringify(this.goodsList));
          tmplist.forEach(function(v,i,ar){
              v.goodsList = v.goodsList.filter((vv,ii,aarr) =>{
                  return vv.chkstatus;
              })
              let tmpdiscount = false;
              let tmpshopamount =0;
              v.goodsList.forEach(function(vv){
                  tmpdiscount = tmpdiscount || vv.discount; 
                  tmpshopamount += parseFloat(vv.goodsScreenPrice* vv.goodsNumber);
                  console.log("计算产品")
              })
              v.hasDiscount = tmpdiscount;
              v.shopamount = tmpshopamount;

              let tmpcouponid = 0
              let tmpcouponscore = 0
              let tmpcouponreach = 0
              if(!v.hasDiscount){
                v.couponList.forEach(function(vv){
                    if(tmpshopamount>= vv.reach1 && (!tmpcouponid || vv.score1>tmpcouponscore )){
                        tmpcouponid = vv.id
                        tmpcouponscore = vv.score1
                        tmpcouponreach = vv.reach1
                    }
                    console.log("计算优惠券")
                })
              }
              v.counponid = tmpcouponid
              v.counponscore = tmpcouponscore
              v.counponreach = tmpcouponreach
          })
          tmplist = tmplist.filter(function(v,i,ar){
              return v.goodsList.length>0;
          });
          return tmplist;
      },
      totnum : function(){
         let num = 0;
         this.chkedList.forEach(function(v){
             num+= v.goodsList.length

         })
         return num;
      },
      totoAmount: function(){
        let amount = 0
        this.chkedList.forEach(function(v){
            v.goodsList.forEach(function(vv,ii){
                amount += vv.goodsNumber * vv.goodsScreenPrice
            })
        })
        return amount
      }
  }
}
</script>
